<template>
  <div class="sidebar" :style="{ height: height + 'px' }">
    <el-menu :default-active="onRoutes" background-color="#324157" text-color="#bfcbd9" active-text-color="#20a0ff"
      router style="font-size: 23px">
      <el-menu-item v-for="item in menuData" :key="item.id" :index="item.navPath">
        <template #title>
          <span>{{ item.type }}</span>
        </template>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script>
export default {
  props: {
    menuData: {
      type: Array
    }
  },
  data() {
    return {
      height: ''
    }
  },
  methods: {
    getHeight() {
      this.height = window.innerHeight - 60
    }
  },
  computed: {
    onRoutes() {
      return this.$route.path.replace('/', '')
    }
  },
  mounted() {
    this.getHeight()
    window.addEventListener('resize', this.getHeight)
  },
  unmounted() {
    window.removeEventListener('resize', this.getHeight)
  }

}
</script>

<style scoped lang='scss'>
.sidebar {
  display: flex;
  position: absolute;
  top: 60px;
  left: 0;
  bottom: 0;
  width: 200px;
}

.sidebar>ul {
  height: 100%;
  width: 100%;

}

.sidebar>ul>.el-menu-item {
  font-size: 19px;
  margin: 1rem 0;
}
</style>
